<template>
  <div class="table-page-container layout-padding">
    <el-card shadow="hover" class="layout-padding-auto">
      <div class="system-user-search mb15">
        <el-form ref="searchFormRef" :model="searchForm" inline>
          <el-form-item label="电表名称" prop="name">
            <el-input v-model="searchForm.name" placeholder="请输入"> </el-input>
          </el-form-item>
          <el-form-item label="电表类型" prop="type">
            <CommonSelect v-model="searchForm.type" :options="ElectricityMeterTypeOptions"></CommonSelect>
          </el-form-item>
          <el-form-item>
            <el-button size="default" type="primary" @click="refresh">
              <el-icon>
                <ele-Search></ele-Search>
              </el-icon>
              查询
            </el-button>
            <el-button size="default" @click="onRest">
              <el-icon>
                <ele-RefreshRight></ele-RefreshRight>
              </el-icon>
              重置
            </el-button>
          </el-form-item>
        </el-form>
        <el-button
          v-if="$can('create', { type: 'ProjectType', __type: 'Dictionary' })"
          size="default"
          type="primary"
          class="ml10"
          @click="onOpenAddDic()"
        >
          <el-icon>
            <ele-Plus />
          </el-icon>
          新增
        </el-button>
      </div>
      <el-table :data="tableData.list" v-loading="loading" element-loading-text="加载中" border style="width: 100%">
        <el-table-column type="index" label="序号" width="60" align="center" />
        <el-table-column prop="name" label="电表名称"></el-table-column>
        <el-table-column label="电表类型" show-overflow-tooltip>
          <template v-slot="{ row }">
            {{ ElectricityMeterTypeLabel[row.type] }}
          </template>
        </el-table-column>
        <el-table-column prop="rate" label="倍率" show-overflow-tooltip></el-table-column>
        <el-table-column prop="parent.name" label="父表" show-overflow-tooltip></el-table-column>
        <el-table-column prop="created_at" label="创建时间" show-overflow-tooltip></el-table-column>
        <el-table-column label="操作" width="100">
          <template #default="scope">
            <el-button
              v-if="$can('update', { type: 'ProjectType', __type: 'Dictionary' })"
              size="small"
              text
              type="primary"
              @click="handleEdit(scope.row)"
              >修改</el-button
            >
            <el-button
              v-if="$can('delete', { type: 'ProjectType', __type: 'Dictionary' })"
              size="small"
              text
              type="primary"
              @click="handleDelete(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <CommonPagination :pagination="pagination" :total="tableData.total"></CommonPagination>
    </el-card>
    <ElectricityMeterDialog ref="dialogRef" @refresh="refresh" />
  </div>
</template>

<script setup lang="ts" name="electricityMeter">
import { defineAsyncComponent, ref, reactive } from 'vue';
import { ElMessageBox, ElMessage, FormInstance } from 'element-plus';
import { readAllElectricityMeter, deleteElectricityMeter } from '/@/api/electricity-meter';
import { useTable } from '/@/hooks/use-table';
import CommonPagination from '/@/components/common-pagination/index.vue';
import { ElectricityMeter } from '/@/models';
import { ElectricityMeterTypeLabel } from '/@/constants';
import { DialogType } from '/@/constants/dialog-type';
import { toOptions } from '/@/hooks/use-options';
import CommonSelect from '/@/components/common-select/index.vue';

const ElectricityMeterTypeOptions = toOptions(ElectricityMeterTypeLabel);

const searchFormRef = ref<FormInstance>();
const searchForm = reactive({
  name: '',
  type: undefined
});

// 引入组件
const ElectricityMeterDialog = defineAsyncComponent(() => import('./dialog.vue'));

// 定义变量内容
const dialogRef = ref();

const { tableData, loading, pagination, refresh } = useTable<ElectricityMeter>(({ page, pageSize }) =>
  readAllElectricityMeter({ page, pageSize, name: searchForm.name, type: searchForm.type || undefined }).then(
    ({ data }) => {
      return {
        total: data?.total,
        list: data?.list
      };
    }
  )
);

const onRest = () => {
  searchFormRef.value?.resetFields();
  refresh();
};

// 打开新增字典弹窗
const onOpenAddDic = () => {
  dialogRef.value.openDialog(DialogType.CREATE);
};
// 打开修改字典弹窗
const handleEdit = (row: ElectricityMeter) => {
  dialogRef.value.openDialog(DialogType.EDIT, row);
};
// 删除字典
const handleDelete = (row: ElectricityMeter) => {
  ElMessageBox.confirm(`此操作不可恢复，是否继续?`, '提示', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning',
    buttonSize: 'default',
    beforeClose: async (action, instance, done) => {
      if (action === 'confirm') {
        instance.confirmButtonLoading = true;
        instance.confirmButtonText = '提交中';
        await deleteElectricityMeter(row.id).then(() => {
          ElMessage.success('删除成功');
          refresh();
        });
        instance.confirmButtonLoading = false;
        done();
      } else {
        done();
      }
    }
  });
};
</script>
